<template>
	<div class="container">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="分享审批" name="first"></el-tab-pane>
			<el-tab-pane label="分享记录" name="second"></el-tab-pane>
		</el-tabs>
		<el-row>
			<el-form
				:inline="true"
				:model="listQuery"
				ref="searchForm"
				class="demo-form-inline"
			>
				<el-col :span="18">
					<el-form-item label="分享人" prop="status">
						<el-input
							placeholder="请输入分享人"
							v-model="listQuery.custom_query_value"
							autofocus
							clearable
						></el-input>
					</el-form-item>
					<el-form-item label="分享时间" prop="timeVal">
						<el-date-picker
							v-model="listQuery.timeVal"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							value-format="yyyy-MM-dd"
							@change="getTimeVal"
						></el-date-picker>
					</el-form-item>
					<el-form-item prop="custom_query_type" label="状态">
						<el-select
							placeholder="全部"
							v-model="listQuery.custom_query_type"
							clearable
						>
							<el-option label="已申请" value="3"></el-option>
							<el-option label="已通过" value="2"></el-option>
							<el-option label="已拒绝" value="1"></el-option>
							<el-option label="已解约" value="1"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="tr">
					<el-form-item>
						<el-button type="primary" @click="handleRefresh">查询</el-button>
						<el-button type="primary" @click="handleReset('searchForm')"
							>重置</el-button
						>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
		<!-- 搜索 -->

		<my-table
			:table-data="tableData"
			:col-configs="colConfigs"
			:list-loading="listLoading"
			:total="total"
			:page-size="listQuery.pagesize"
			:isExpand="true"
			:isExpandOne="true"
			@refreshList="getList"
		>
			<el-table-column label="操作" slot="opt">
				<template slot-scope="{ row }">
					<span v-if="row.status === 0">详情TODO</span>
					<span v-if="row.status === 1">通过TODO</span>
					<span v-if="row.status === 2">拒绝TODO</span>
				</template>
			</el-table-column>
			<el-table-column label="状态" slot="status">
				<template slot-scope="{ row }">
					<span v-if="row.status === 0">已申请</span>
					<span v-if="row.status === 1">已通过</span>
					<span v-if="row.status === 2">已拒绝</span>
					<span v-if="row.status === 3">已解约</span>
				</template>
			</el-table-column>
			<!--展开的列表-->
			<template slot="expand">
				<my-table
					:table-data="tableData2"
					:col-configs="colConfigs2"
					:list-loading="listLoading"
					:total="total2"
					:page-size="listQuery.pagesize"
					@refreshList="getDetailList"
				>
					<el-table-column slot="opt" label="操作" width="120px">
						<template slot-scope="{ row }">
							<span class="iconfont col-0A70B0">&#xe679;</span>
						</template>
					</el-table-column>
				</my-table>
			</template>
		</my-table>
	</div>
</template>

<script>
import myTable from 'components/myTable'
import { getMsgList } from '@/api/visit-mg'
export default {
	name: 'MsgManger',
	components: { myTable },
	data () {
		return {
			listQuery: {
				pagesize: 10,
				pageindex: 1,
				timeVal: [],
			},
			colConfigs: [
				{
					type: 'index',
					label: '序号',
				},
				{ slot: 'opt' },
				{ slot: 'status' },
				{
					prop: 'share_user',
					label: '分享人',
					sortable: false,
				},
				{
					prop: 'req_time',
					label: '分享时间',
					sortable: false,
				},
				{
					prop: 'share_doctor',
					label: '分享对象',
					sortable: false,
				},
			],
			tableData: [
				{
					hospital_name: '第一医院',
					share_user: '王浩然',
					status: 0,
					share_doctor: '王麻子医生',
				},
				{
					hospital_name: '第一1医院',
					share_user: '王浩然',
					status: 3,
					share_doctor: '王麻子医生',
				},
				{
					hospital_name: '第一1医院',
					share_user: '王浩然',
					status: 0,
					share_doctor: '王麻子医生',
				},
				{
					hospital_name: '第一医院1',
					share_user: '王浩然',
					status: 1,
					share_doctor: '王麻子医生',
				},
				{
					hospital_name: '第一医院222',
					status: 2,
					share_doctor: '王麻子医生',
				},
			],
			total: 0,
			colConfigs2: [
				{
					type: 'index',
					label: '序号',
				},
				{
					prop: 'patient_name',
					label: '姓名',
					sortable: false,
				},
				{
					prop: 'accession_number',
					label: '检查号',
					sortable: false,
				},
				{
					prop: 'med_rec_no',
					label: '病历号',
					sortable: false,
				},
				{
					prop: 'patient_id',
					label: '患者编号',
					sortable: false,
				},
				{
					prop: 'perform_dept',
					label: '检查科室',
					sortable: false,
				},
				{
					prop: 'exam_type',
					label: '检查类型',
					sortable: false,
				},
				{
					prop: 'perform_time',
					label: '检查时间',
					sortable: false,
				},
			],
			tableData2: [
				{
					hospital_name: '第一医院',
					share_user: '王浩然',
					patient_id: '0252525W25',
					share_doctor: '王麻子医生',
				},
				{
					hospital_name: '第一1医院',
					share_user: '王浩然',
					patient_id: '3252525W25',
					share_doctor: '王麻子医生',
				},
				{
					hospital_name: '第一1医院',
					share_user: '王浩然',
					patient_id: '0252525W25',
					share_doctor: '王麻子医生',
				},
				{
					hospital_name: '第一医院1',
					share_user: '王浩然',
					patient_id: '1252525W25',
					share_doctor: '王麻子医生',
				},
				{
					hospital_name: '第一医院222',
					patient_id: '2252525W25',
					share_doctor: '王麻子医生',
				},
			],
			total2: 0,
			listLoading: false,
			activeName: 'first',
		}
	},
	computed: {},
	created () { },
	mounted () {
		// this.getList()
	},
	methods: {
		getList ( val ) {

      /*
       * h获取任务统计
       * TODO
       */
			delete this.listQuery.timeVal
			const params = Object.assign( this.listQuery, val )
			console.log( params )
			getMsgList( params ).then( res => {
				if ( res.code === 0 ) {
					this.tableData = res.data.listQuery
					this.total = res.data.total
				}
			} )
		},
		getDetailList () {
			// 获取详情
		},
		handleRefresh () {
			this.getList()
		},
		handleReset ( searchForm ) {
			// 表单重置
			this.$nextTick( () => {
				this.$refs.searchForm.resetFields()
			} )
		},
		handleClick () {
			console.log( this.activeName )
			if ( this.activeName === 'first' ) {
				// 我的申请
			} else {
				// 我的授权
			}
		},
	},
}
</script>

<style scoped lang="less">
.container {
	padding: 0 10px;
	.btns {
		margin-bottom: 20px;
	}
	.el-input__inner {
		width: 13.7vw;
	}
}
</style>
